<template>
   <div id="root" v-cloak>
        <!-- 获取当前时间 -->
        <div class="date">{{date}}</div>
        <!-- 输入框 -->
        <textarea class="inputTextarea"></textarea>
        <!-- 发送关闭组按钮 -->
        <div class="buttonDiv">
            <button class="exit">关闭(<u>C</u>)</button>
            <button class="send">发送(<u>S</u>)</button>
        </div>
        <!-- 功能组件图标 -->
        <div class="icon">
            <ul class="left_ul">
                <li v-for="(i,index) in optionIcon_left " class="left_li" :key="index">
                    <img :src="optionIcon_left[index]"/>
                </li>
            </ul>
            <ul class="right_ul">
                <li v-for="(i,index) in optionIcon_right" class="right_li" :key="index">
                    <img :src="optionIcon_right[index]"/>
                </li>
            </ul>
        </div>
        <!-- 消息输出 -->
        <div class="output">
            <div class="out">
                <ul class="Portrait_ul" >
                    <li v-for="(i,index) in Opposite" :key="index" class="Portrait border_radius_25"  ref="Portrait_li" >
                        <span class="oppositeSpan" >{{Opposite[index]}}</span>
                    </li>
                </ul>
            </div>
            <div class="out">
                 <ul class="my_ul">
                    <li v-for="(i,index) in my" :key="index" ref="my_li" class="my">
                        <span class="mySpan border_radius_25">{{my[index]}}</span>
                        <img :src="myIcon[0]" class="myIcon_img"/>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 视频&语音 -->
        <!--翻译： voice 语音 -->
        <div class="moive_voice">
            <ul>
                <li v-for="(i,index) in mvIcon" :key="index" class="mvIcon">
                   <img :src="mvIcon[index]" :title="title[index]" />
                </li>
            </ul>
        </div>
        <!-- 标题 -->
        <div class="windowTitle">
            <div class="titleCenter" v-once>{{windowTitle}}</div>
            <ul>
               <li v-for="(i,index) in windowIcon" :key="index" class="windowTcon">
                   <img :src="windowIcon[index]" />
               </li>
            </ul>
        </div>
    </div>
</template>

<script>
// ###### Thu Dec 9 10:00:10 CST 2021
// Chat_Window 聊天窗口
// Portrait 头像
// Opposite 对方

import {mixin} from '../js/mixin'
export default {
  name: '',
  data () {
    return {
        msg: '',
        date:null,
        windowName:'',
        PortraitMargin:'',
        changeMargin:{
            // 'margin-top':this.r_margin+'px'
            // color:'red'
            // marginTop:this.r_margin()+'px'
        },title:['语音','视频','更多'],
        optionIcon_left:[
            require('../../00_基础/templates/icon/笑脸.png'),
            require('../../00_基础/templates/icon/gif.png'),
            require('../../00_基础/templates/icon/剪切.png'),
            require('../../00_基础/templates/icon/文件.png'),
            require('../../00_基础/templates/icon/腾讯课堂.png'),
            require('../../00_基础/templates/icon/图片.png'),
            require('../../00_基础/templates/icon/震动.png'),
            require('../../00_基础/templates/icon/更多.png')
        ],
         optionIcon_right:[
            require('../../00_基础/templates/icon/扩展.png'),
            require('../../00_基础/templates/icon/历史.png'),
         ],   
        OppositeIcon:[
            require('../../00_基础/templates/icon/头像.png'),
        ],
        myIcon:[
            require('../../00_基础/templates/icon/头像2.png')
        ],
         mvIcon:[
            require('../../00_基础/templates/icon/语音.png'),
            require('../../00_基础/templates/icon/视频.png'),
            require('../../00_基础/templates/icon/更多(红).png')
        ],
        windowIcon:[
            require('../../00_基础/templates/icon/下三角.png'),
            require('../../00_基础/templates/icon/缩小.png'),
            require('../../00_基础/templates/icon/窗口化.png'),
            require('../../00_基础/templates/icon/关闭.png'),

        ],
        Opposite:[
            '我们已经是好友啦，一起聊天吧_0',
            '今天也是美好的一天呢_0',
            '今晚的月亮真美_1',
            
        ],
        my:[
            '我们已经是好友啦，一起聊天吧!_0',
            '你好，很高兴认识你_0',
            '对，适合刺碴_1'
        ]
    }
  },
  props:{
      windowTitle:{
          type:String,
          require:true
      }
  },
  methods: {
     
  },
  mounted () {
   
  },computed:{
     
  },mixins:[mixin]
}
</script>

 <style scope>
        /* 还未加载Vue时隐藏 */
        [v-clock]{
            display: none;
        }
        *{
            margin: 0;
            padding: 0;
            border: 1px;
        }
        #root{
            position:absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 500px;
            height: 500px;
            border-radius: 3px;
            box-shadow: 1px 1px 5px #888888;
            display: flex;
            /* flex-flow: column-reverse nowrap; */
            flex-direction: column-reverse;
            padding: 0 5px;
        }
        .date{
            height: 5%;
            /* border-top: 1px dotted #888888; */
        }
        .inputTextarea{
            height: 16%;
            /* 取消右侧小三角形 */
            resize: none;
            /* 超出内容隐藏 */
            overflow-y: hidden;
            /* 屏蔽点击框 outline 轮廓 */
            outline: none;
            font-family: Arial,Verdana,Sans-serif;
            font-size: 20px;
        }
        /* 定义滚动条样式 */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
            background-color: rgba(240, 240, 240, 1);
        }
 
        /*定义滚动条轨道 内阴影+圆角*/
        ::-webkit-scrollbar-track {
            box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);
            border-radius: 10px;
            background-color: rgba(240, 240, 240, .5);
        }
 
        /*定义滑块 内阴影+圆角*/
        ::-webkit-scrollbar-thumb {
            border-radius: 10px;
            box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);
            background-color: rgba(240, 240, 240, .5);
        }
        .buttonDiv{
            width: 30%;
            height: 5%;
            /* border: dashed 1px black; */
            position: absolute;
            left: 65%;
            bottom: 3%;
            display: flex;
            justify-content: space-around;
            /* flex-direction: row-reverse; */
        }
        .exit,.send{
            width: 45%;
            border: 1px solid rgb(205, 207, 208);
            border-radius: 2px;
            background-color: white;
        }
        .send{
            background-color: rgb(243, 94, 94);
            color: white;
        }
        .exit:hover{
            background-color: rgb(239, 239, 240);
        }
        .send:hover{
            background-color: rgb(246, 131, 131);
        }
        .icon{
            border-top:1px solid rgb(235, 235, 255);
            /* position: relative; */
            display: flex;
            justify-content: space-between;
            /* border: deeppink dashed 1px; */
            width: 100%;
            height: 6%;
            margin-bottom: 5px;
        }
        .left_ul{
            /* position:absolute; */
            /* left: 3%; */
            width: 65%;
            height:100%;
            /* border: 1px dashed black; */
        }
        .right_ul{
            /* position: absolute; */
            /* border: 1px dashed black; */
            width: 15%;
            height:100%;
        }
        .left_li{
            float: left;
            width: 7%;
            height: 85%;
            list-style: none;
            text-align: center;
            margin: 0 3px;
            padding-right: 1px;
            /* border:1px solid black; */
            background-color: white;
            /* border-radius: 50%; */
            /* overflow: hidden; */
            /* margin: 5px; */
            /* list-style-image: url('./icon/笑脸.png'); */
        }
        .right_li{
            float: left;
            width: 30%;
            height: 75%;
            margin: 0 3px;
            padding-right: 1px;
            /* border:1px solid black; */
            background-color: white;
            list-style: none;
        }
        .left_li:hover,.right_li:hover{
            background-color: rgb(241, 241, 241);
            border-radius: 5px;
        }
        img{
            /* border: 1px dashed orange; */
            width: 100%;
        }
        .output{
            height: 55%;
            width: 100%;
            /* border: 1px dashed red; */
            display: flex;
            overflow-y: scroll;
        }
        /* 暂时这么写 */
        .out{
            height: auto;
            /* border: 1px orange solid; */
            width: 45%;
            /* height: 10%; */
            margin: 0 auto;
        }
        .Portrait_ul{
            width: 100%;
            height: auto;
            /* display: flex;
            flex-flow: column wrap; */
            /* border: 1px solid black; */
        }
        .Portrait{
            height: auto;
            margin-left: 21%;
            text-align: left;
            font-size: 14px;
            /* padding: 5px; */
            padding: 0 0 0 10px;
            /* display: flex; */
            /* flex-direction: row-reverse; */
            /* list-style-position: inside; */
            margin-top: 5px;
            list-style-image: url('../../00_基础/templates/icon/头像.png');
            background-color: rgb(229, 229, 229);
        }
        /* 用户双方公用的圆角样式 */
        .border_radius_25{
            border-radius: 25px;
        }
        .oppositeSpan{
            position: relative;
            top: -10px;
            display: block;
        }
        .my_ul{
            width: 100%;
            display: flex;
            flex-direction: column;
            /* border: 1px dashed black; */
        }
        .my_ul li{
            margin-top: 5px;
            width: 100%;
            text-align: left;
            font-size: 14px;
            list-style: none;
            display: flex;
            flex-direction: row-reverse;
        }
        .my_ul li span{
            display: block;
            color: white;
            background-color: rgb(18, 183, 245);
            padding: 10px;
            font-size: 14px;
            order: 2;
        }
        .myIcon_img{
            width: 18%;
            height: 18%;
            order: 1;
            /* border: 1px solid red; */
            margin-left: 5px;
        }
        .moive_voice{
            width: 100%;
            height: 9%;
            display: flex;
            flex-direction: row-reverse;
            /* border: 1px dashed orange; */
        }
        .moive_voice ul {
            flex-basis: 25%;
            width: auto;
            height: auto;
            display: flex;
            justify-content: space-between;
            /* border: 1px double black; */
        }
        .moive_voice ul li{
            height: 67%;
            width: 25%;
            /* border: 1px double black; */
            float: left;
            list-style: none;
            border-radius: 50%;
            margin-top: 5%;
        }
        .moive_voice ul li img{
            width: 100%;
            height: 100%;
        }
        .windowTitle{
            background-color: rgb(243, 94, 94) ;
            width: 102%;
            height: 8%;
            display: flex;
            line-height: 250%;
            margin-left: -5px;
            justify-content: center;
        }
        .titleCenter{
            /* border: 1px solid black; */
            width: 30%;
            height: 100%;
            text-align: center;
            font-size: 16px;
            color: white;
        }
        .titleCenter:hover{
            text-decoration: underline;
        }
        .windowTitle ul{
            /* border: 1px solid black; */
            width: 25%;
            height: 7%;
            position:absolute;
            right: 0px;
            display: flex;
            justify-content: space-between;
        }
        .windowTitle ul li{
            /* border: dashed 1px blue; */
            width: 21%;
            height: 85%;
            float: left;
            list-style: none;
        }
        .windowTitle ul li:hover{
            background-color: rgb(245, 128, 128);
        }
    </style>
